<template>
	<div class="page-containter">
		<uni-nav-bar fixed shadow :border="false"
			:title="detail ? ((isExam ? '【考试】' :'【作业】') +  (detail && detail.name || '')) : ''" left-icon="left"
			@clickLeft="onClickLeft"></uni-nav-bar>
		<div class="page-content" v-if="detail">
			<div class="source fs-14 fc-fff ellipsis" v-if="detail.parentName">来源：{{detail.parentName}}</div>
			<div class="page-title page-title-bg fs-24"
				:style="{'padding': !!detail.parentName ? '60px 0 80px;' : '40px 0 80px'}">
				<span class="title fs-24 ellipsis">{{detail.name}}</span>
				<div class="desc fs-14 fc-fff" :data-before="isExam ? '考试' :'线上作业'"></div>
				<div class="desc fs-14 fc-fff" v-if="editionType === '2'">来自：{{detail.siteName}}</div>
			</div>
			<div class="common-wrap content-wrap">
				<div class="user-wrap">
					<div class="photo-wrap">
						<generatePhoto width="56px" :id="20" text="DEMO" style="margin: 0 auto 0.16rem;">
						</generatePhoto>
					</div>
					<div class="name-wrap fs-16 fcolor-333">DEMO</div>
				</div>
				<div class="group-wrap">
					<div class="group-wrap-item flex-wrap flex-middle">
						<div class="group-label">{{isExam ? '答卷' :'答题'}}时长</div>
						<div class="group-text fs-14 fc-333">{{detail.timeLimit ? getTime(detail.timeLimit):'不限制'}}
						</div>
					</div>
					<div class="group-wrap-item flex-wrap flex-middle">
						<div class="group-label">{{isExam ? '试卷' : ''}}总分</div>
						<div class="group-text fs-14 fc-333">{{detail.totalScore}}分
						</div>
					</div>
					<div class="group-wrap-item flex-wrap flex-middle">
						<div class="group-label">及格分数</div>
						<div class="group-text fs-14 fc-333">{{detail.passScore}}分</div>
					</div>
					<div class="group-wrap-item flex-wrap flex-middle">
						<div class="group-label">试题数量</div>
						<div class="group-text fs-14 fc-333">{{detail.totalQuestionsNum}}题</div>
					</div>
					<div class="group-wrap-item flex-wrap flex-middle">
						<div class="group-label">答题次数</div>
						<div class="group-text fs-14 fc-333">{{detail.alreadyNum || 0}}/不限制</div>
					</div>
					<div class="group-wrap-item flex-wrap flex-middle">
						<div class="group-label">距离结束</div>
						<div class="group-text fs-14 fc-333">不限制</div>
					</div>
					<div class="group-wrap-item flex-wrap flex-middle">
						<div class="group-label">学时</div>
						<div class="group-text fs-14 fc-333">{{detail.credit || 0}}</div>
					</div>
					<div class="group-wrap-item flex-wrap flex-middle">
						<div class="group-label">积分</div>
						<div class="group-text fs-14 fc-333">{{detail.pointScore || 0}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="btn-wrap flex-wrap flex-middle">
			<button round class="btn" @click="toDetail" type="primary">开始考试</button>
		</div>
	</div>
</template>
<script>
	import generatePhoto from "@/components/dragMaker/generatePhoto"
	import {
		getTime,
		getDiffTime,
		getConfigName
	} from '@/assets/js/util'
	import {
		beforeExamCheck,
		manaTypes
	} from "@/assets/js/constant";
	import mockData from "@/mock/exam/statr.json"
	export default {

		head() {
			return {
				title: this.detail && this.detail.name,

			}
		},
		data() {
			return {
				detail: null,
				id: '',
				courseType: '',
				statusList: ['即将开始', '开始考试', '继续考试', '已考试', '已过期'],
				statusList_2: ['即将开始', '开始答题', '继续答题', '已答题', '已过期'],
				listData: [],
				status: {
					'P': {
						text: '通过',
						color: '#52C41A',
					},
					'F': {
						text: '未通过',
						color: '#ECA049',
					},
					'I': {
						text: '考试中',
						color: '#1890FF',
					},
					'M': {
						text: '待阅卷',
						color: '#999',
					},
				},
				btnStatus: false,
				cerDrawStatus: '',
				beforeExamCheck: beforeExamCheck,
				// 签名
				signatureDialog: false,
				signatureLoading: false,
				signatureBase64: '',
			}
		},
		components: {
			generatePhoto
		},
		onLoad(query) {
			this.id = query.id || ''
			this.courseType = query.type || ''
		},
		onShow() {
			this.initPage()
		},
		computed: {
			creditName() {
				return getConfigName('CREDIT_SHOW_NAME')
			},
			getSourceName() {
				return this.detail.parentType && manaTypes.filter(c => c.type === this.detail.parentType)[0].name
			},
			isExam() {
				return this.detail && this.detail.courseType === 'E' || this.courseType === 'E'
			},

			isShowSignature() {
				return this.isESignature === '1' && this.detail && this.detail.eSignatureFlag === '1'
			},
		},
		methods: {
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			initPage() {
				this.getInfo()
			},
			getInfo() {
				this.detail = mockData.data
			},
			getContent(brief) {
				brief = brief || ''
				try {
					return decodeURIComponent(brief)
				} catch (e) {
					return brief
				}
			},
			toDetail() {
				this.$uniPush({
					name: 'exam-detail-id'
				})
			},
			getTime(s) {
				return getTime(s)
			},
			getDiffTime(s) {
				return getDiffTime(s.split(/[\-,\:,\ ]/g), true)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page-containter {
		background: #F5F8F8;
		padding-bottom: 70px;
		min-height: 100vh;

		.page-content {
			position: relative;
			z-index: 2;

			.source {
				width: 345px;
				height: 32px;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 6px;
				text-align: center;
				position: absolute;
				line-height: 32px;
				top: 8px;
				left: 50%;
				transform: translate(-50%, 0);
				z-index: 5;
			}

			.page-bg {
				position: fixed;
				z-index: -1;

			}
		}

		.page-title {
			padding: 60px 0 80px;
			line-height: 34px;
			min-height: 200px;
			color: #fff;
			text-align: center;
			z-index: 2;

			.title {
				margin: 0 auto;
			}
		}

		.common-wrap {
			//position: relative;
			z-index: 10;
			width: calc(100% - 30px);
			border-radius: 6px;
			margin: -50px auto 0;
			background: #FFFFFF;
			box-shadow: 0 8px 30px 0 rgba(226, 233, 232, 0.47);

			&+.common-wrap {
				margin-top: 15px;
			}

			&.content-wrap {
				position: relative;
				padding: 62px 15px 10px;

				.user-wrap {
					position: absolute;
					width: 100%;
					top: -30px;
					left: 0;

					.photo-wrap {
						width: 60px;
						height: 60px;
						border: 2px solid #FFFFFF;
						border-radius: 50%;
						overflow: hidden;
						background: #fff;
						margin: 0 auto 6px;

						img {
							width: 100%;
						}
					}

					.name-wrap {
						font-weight: 500;
						line-height: 22px;
						text-align: center;
					}
				}

				.group-wrap {
					padding: 10px 0;

					.group-wrap-item {
						padding: 10px 0;
					}

					.group-label {
						font-size: 14px;
						line-height: 20px;
						min-width: 75px;
						color: #999;
					}

					.group-text {
						flex: 1;
						margin-left: 10px;
					}

					.group-btn {
						padding-left: 8px;
						margin-left: 3px;
						border-left: 1px solid #ddd;
					}
				}

				.exam-wrap {
					border-top: 1px solid #EEEEEE;

					.exam-title {
						padding: 10px 0 5px;
						line-height: 20px;
						color: #999;
					}

					.exam-text {
						font-size: 14px;
						line-height: 24px;
						color: #666;
					}
				}
			}

			.brief-wrap {
				padding: 15px 0;

				.exam-text {
					font-size: 14px;
					line-height: 24px;
					color: #333;
				}
			}
		}

		.btn-wrap {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 8px 15px;
			border-top: 1px solid #EEEEEE;
			background: #fff;
			z-index: 1000;

			button {
				width: 100%;
				height: 40px;

				&.btn-overdue {
					color: #666;
					background: #F5F5F5;
				}
			}
		}

		.cer-draw-wrap {
			position: absolute;
			left: 15px;
			bottom: 70px;
			width: calc(100% - 30px);
			height: 50px;
			background: #FFFFFF;
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
			border-radius: 6px;
			border: 1px solid #EEEEEE;
			padding: 0 15px;

			button {
				width: 72px;
				height: 28px;
				padding: 0 2px;
				border: none;
				background: linear-gradient(148deg, #FBD249 0%, #F5A623 100%);
			}
		}
	}
</style>